import { useMount } from "ahooks";
import { useState } from "react";

export default function useDark(): [boolean, () => void] {
	const [dark, setDark] = useState(false);
	useMount(() => {
		window
			.matchMedia("(prefers-color-scheme: dark)")
			.addEventListener("change", (e) => {
				darkChange(e.matches);
			});
	});
	function darkChange(val: boolean) {
		if (val) {
			document.documentElement.classList.add("dark");
		} else {
			document.documentElement.classList.remove("dark");
		}
		setDark(val);
	}
	return [
		dark,
		() => {
			darkChange(!dark);
		},
	];
}
